<template>
  <div>
    <div class="modal-top">
      <p>请选择设备</p>
      <starSelect v-model="equipment" :options="options" transfer placeholder="请选择设备" @on-change="changeEquipment"
      ></starSelect>
    </div>
    <Divider />
    <div class="modal-content" v-if="!!equipment">
      <cfgForm :cols="cols" :labelWidth="labelWidth" :rules="rules" :columns="columns" ref="_exfrm" :data="formData"></cfgForm>
    </div>
  </div>
</template>

<script>
    import formSelect from '@/pages/components/formSelect';
    import formRule from '@/pages/components/formRule';
    import { typeClassName } from '@/pages/config/classNameMap';
    export default {
        components: { formSelect, formRule },
        data () {
            return {
                collectionObject: null, // 设备
                options: [],
                equipment: '',
                resultData: {},
                resultColumns: [],
                resultPanel: {
                    width: 1024,
                    zIndex: 100,
                    titleStyle: {},
                    drawer: {
                        show: false
                    },
                    cols: 2
                },
                isSingleCheck: false
            };
        },
        props: {
            modelType: {
                default: () => {
                    return '';
                }
            },
            type: {
                default: () => {
                    return '';
                }
            },
            className: {
                default: () => {
                    return '';
                }
            },
            labelWidth: {
                default: () => {
                    return 120;
                }
            },
            rules: {
                default: () => {
                    return {};
                }
            },
            cols: {
                default: () => {
                    return 2;
                }
            },
            columns: {
                default: () => {
                    return [];
                }
            },
            formData: {
                default: () => {
                    return {};
                }
            },
        },
        computed: {
        },
        created () {
            this.collectionObject = this.$modelObject.create(`${this.modelType}Collection`);
            // 获取设备列表
            this.getEquipmentData()
        },
        methods: {
            // 获取设备列表
            getEquipmentData () {
                let filter = {
                    className: this.className,
                    type: this.type,
                    sf_category: '0',
                }
                let newFilter = '';
                if (this.tools.isReal(filter)) {
                    newFilter = this.collectionObject.util.getFilter(filter);
                }
                this.collectionObject.query(newFilter).then(flag => {
                    if (flag) {
                        let options = this.collectionObject.records
                        this.options = options.map(d => {
                            return {
                                label: d.values['sf_name'],
                                value: d.id || d.values['sf_code']
                            }
                        })
                    } else {
                        this.options = []
                    }
                })
            },
            // 修改选择设备
            changeEquipment () {
                let index = this.options.findIndex(d => d.value === this.equipment)
                if (index !== -1) {
                    let selectObj = this.options[index];
                    let equipmentObj = {
                        equipName: selectObj.label,
                        equipCode: selectObj.value
                    }
                    this.$emit('changeEquipment', equipmentObj)
                }
            },
            // 执行结果保存
            handleResultSubmit () {
                this.$refs._exfrm.$refs.form.validate(valid => {
                    if (valid) {
                        let data = this.tools.lodash.cloneDeep(this.formData)
                        this.$emit('submit', data);
                    }
                });
            }
        }
    };
</script>
<style scoped lang="scss">
.modal-top {
  margin-bottom: 20px;
}
</style>
